<!--  -->
<template>
    <div class="team-reward">
        <Nav title="订单详情">
            <template v-slot:left>
                <span class="back" @click="$router.back()"></span>
            </template>
        </Nav>
        <div class="divide-line"></div>
        <div class="reward-info">
            <div class="title flex">
                <span class="msg-tip flex justify-center aligin-center color-white">活动信息</span>
            </div>
            <div class="order-info">
                <div>活动名称: {{teamDetail.name}}</div>
                <div class="mt-10">订单编号:{{teamDetail.order_no}}</div>
                <div class="mt-10">订单金额:￥{{teamDetail.total_money}}</div>
                <div class="mt-10">获得能量值:{{teamDetail.give_power}}</div>
            </div>
        </div>
        <div class="divide-line"></div>
        <div class="reward-info">
            <div class="title flex">
                <span class="msg-tip1 flex justify-center aligin-center color-white">物流信息</span>
            </div>
             <div class="order-info">
                <div>收件人: {{teamDetail.pid_rewards.nickname}}</div>
                <div class="mt-10">电话: {{teamDetail.pid_rewards.mobile}}</div>
                <template v-if="$route.query.type==2">
                  <router-link tag="div" :to="{name:'addresslists',query:{pr_id:teamDetail.pid_rewards.id}}" class="mt-10 flex" v-if="teamDetail.pid_rewards.address"> <span>邮件地址: {{teamDetail.pid_rewards.address}}</span> <span class="edit-icon"></span></router-link>
                  <div class="mt-10 flex" v-else> <router-link tag="span" :to="{name:'addressadd'}" class="flex">邮件地址: <span class="color-red">请设置地址</span> <span class="edit-icon"></span> </router-link></div>
                </template>
                 <template v-else>
                  <div class="mt-10">邮件地址: {{teamDetail.pid_rewards.address}}</div>
                </template>
                <div class="mt-10">寄件状态: <span class="color-orange"> {{teamDetail.pid_rewards.ship_info||'没发货'}}</span> </div>
            </div>
        </div>
        <div class="divide-line"></div>
    </div>
</template>

<script>
import {teamReward} from "../../api/api"
import Nav from "../../components/Nav";
export default {
  components: {Nav},
  data() {
    return {
        teamDetail:{pid_rewards:{}}
    };
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {
      teamReward({gau_id:this.$route.params.id}).then(({data:{result}})=>{
          this.teamDetail=result
      })
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.reward-info {
  padding: 12px 0 17px 23px;
  .title {
    padding: 9px 0;
    border-bottom: 1px solid #eaeaea;
  }
  .msg-tip {
    width: 59px;
    height: 24px;
    background: rgba(239, 86, 101, 1);
    border-radius: 4px;
  }
  .msg-tip1 {
    width: 59px;
    height: 24px;
    background: rgba(86, 115, 239, 1);
    border-radius: 4px;
  }
  .order-info {
    padding: 8px 0 16px 10px;
    .edit-icon{
      margin-left: 6px;
      height: 14px;
      width: 14px;
      background: url("../../assets/imgs/edit.png");
      background-size: 100% 100%;
    }
    .color-red{
      color: #EF5665;
    }
  }
  .color-orange{
      color: #F95504;
  }
}
</style>